<template>
  <div class="test-view">
    <h2>组件测试页面</h2>
    
    <!-- Element Plus 组件测试 -->
    <el-card class="test-card">
      <template #header>
        <span>Element Plus 组件测试</span>
      </template>
      
      <el-button type="primary" @click="handleClick">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      
      <el-input 
        v-model="inputValue" 
        placeholder="请输入内容"
        style="margin-top: 10px; width: 200px;"
      />
      
      <p>输入值: {{ inputValue }}</p>
    </el-card>
    
    <!-- VXE Table 组件测试 -->
    <el-card class="test-card">
      <template #header>
        <span>VXE Table 组件测试</span>
      </template>
      
      <vxe-table
        :data="tableData"
        border
        stripe
        height="300"
      >
        <vxe-column type="seq" width="60"></vxe-column>
        <vxe-column field="name" title="姓名" width="120"></vxe-column>
        <vxe-column field="age" title="年龄" width="80"></vxe-column>
        <vxe-column field="email" title="邮箱" width="200"></vxe-column>
        <vxe-column field="status" title="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'active' ? 'success' : 'info'">
              {{ row.status === 'active' ? '活跃' : '非活跃' }}
            </el-tag>
          </template>
        </vxe-column>
      </vxe-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 响应式数据
const inputValue = ref('')
const tableData = ref([
  { name: '张三', age: 25, email: 'zhangsan@example.com', status: 'active' },
  { name: '李四', age: 30, email: 'lisi@example.com', status: 'inactive' },
  { name: '王五', age: 28, email: 'wangwu@example.com', status: 'active' },
  { name: '赵六', age: 35, email: 'zhaoliu@example.com', status: 'inactive' }
])

// 方法
const handleClick = () => {
  ElMessage.success('按钮点击成功！')
}
</script>

<style scoped>
.test-view {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.test-card {
  margin-bottom: 20px;
}

h2 {
  color: #409eff;
  margin-bottom: 20px;
}
</style>
